<?php if($mode=='create'){ ?>
    <div style="text-align:center">
        File can be attached after data saved<br />
        (Attach file bisa dilakukan setelah data disimpan)
    </div>
<?php } 

if(in_array($mode, array('edit','view'))){ ?>
    <div id="dtl_listfile"></div>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
	
	// Function to display format file
	var f_file_formatter = function(val, row){
		var ls_loginfo	= 'Uploaded by '+row.create_id+' from '+row.create_ipaddress+' at '+formatDate(row.create_date)+' '+row.create_date.substr(10);
		if(in_array(row.ext,['xls','xlsx'])){
			return	'<span class="icon-down" style="cursor:pointer; padding-left: 18px;" title="Download '+htmlspecialchars(val)+'" onclick="document.getElementById(\'if_download\').src=\''+gs_path+'/'+controller+'/download_sample_file/?filename='+row.filename+'\';">&nbsp;</span> '+
					'<span class="icon-excel" style="padding-left: 18px;">&nbsp;</span> '+
					'<span title="'+htmlspecialchars(ls_loginfo)+'">'+val+'</span>';
		}else if(in_array(row.ext,['doc','docx'])){
			return	'<span class="icon-down" style="cursor:pointer; padding-left: 18px;" title="Download '+htmlspecialchars(val)+'" onclick="document.getElementById(\'if_download\').src=\''+gs_path+'/'+controller+'/download_sample_file/?filename='+row.filename+'\';">&nbsp;</span> '+
					'<span class="icon-word" style="padding-left: 18px;">&nbsp;</span> '+
					'<span title="'+htmlspecialchars(ls_loginfo)+'">'+val+'</span>';
		}else if(in_array(row.ext,['ppt','pptx'])){
			return	'<span class="icon-down" style="cursor:pointer; padding-left: 18px;" title="Download '+htmlspecialchars(val)+'" onclick="document.getElementById(\'if_download\').src=\''+gs_path+'/'+controller+'/download_sample_file/?filename='+row.filename+'\';">&nbsp;</span> '+
					'<span class="icon-powerpoint" style="padding-left: 18px;">&nbsp;</span> '+
					'<span title="'+htmlspecialchars(ls_loginfo)+'">'+val+'</span>';
		}else if(in_array(row.ext,['pdf'])){
			return	'<span class="icon-down" style="cursor:pointer; padding-left: 18px;" title="Download '+htmlspecialchars(val)+'" onclick="document.getElementById(\'if_download\').src=\''+gs_path+'/'+controller+'/download_sample_file/?filename='+row.filename+'\';">&nbsp;</span> '+
					'<span class="icon-pdf" style="padding-left: 18px;">&nbsp;</span> '+
					'<span title="'+htmlspecialchars(ls_loginfo)+'">'+val+'</span>';
		}else if(in_array(row.ext,['jpg', 'jpeg', 'png', 'bmp', 'gif'])){
			return	'<span class="icon-down" style="cursor:pointer; padding-left: 18px;" title="Download '+htmlspecialchars(val)+'" onclick="document.getElementById(\'if_download\').src=\''+gs_path+'/'+controller+'/download_sample_file/?filename='+row.filename+'\';">&nbsp;</span> '+
					'<span class="icon-jpg" style="cursor:pointer; padding-left: 18px;" title="Show '+htmlspecialchars(val)+'" onclick="f_show_image(\''+row.filename+'\', \''+htmlspecialchars(row.label)+'\', \''+htmlspecialchars(row.width)+'\', \''+htmlspecialchars(row.height)+'\');">&nbsp;</span> '+
					'<span title="'+htmlspecialchars(ls_loginfo)+'">'+val+'</span>';
		}else{
			return	'<span class="icon-down" style="cursor:pointer; padding-left: 18px;" title="Download '+htmlspecialchars(val)+'" onclick="document.getElementById(\'if_download\').src=\''+gs_path+'/'+controller+'/download_sample_file/?filename='+row.filename+'\';">&nbsp;</span> '+
					'<span class="icon-blank-file" style="padding-left: 18px;">&nbsp;</span> '+
					'<span title="'+htmlspecialchars(ls_loginfo)+'">'+val+'</span>';
		}
	};
	
	// Function to display image
	var f_show_image = function(as_filename, as_info, as_width, as_height){
		var maxwidth	= 650;
		var minwidth	= 300;
		
		width			= (as_width-0);
		height			= (as_height-0);
		if(width>height)
		{
			position = 'L'; 
			if(width<maxwidth){ maxwidth = width; } 
		} else if(width<height)
		{ 
			position = 'P'; 
			if(height<maxwidth){ maxwidth = height; } 
		} else 
		{
			position = 'S'; 
			if(width<maxwidth){ maxwidth = width; } 
		}
		if(maxwidth<minwidth) maxwidth = minwidth;
		
		// Synchronize Picture Size
		if(position=='S'){ width=maxwidth; height=maxwidth; }
		else if(position == 'L'){
			height	= Math.ceil((maxwidth/width)*height);
			width	= maxwidth;
		}else if(position == 'P'){
			width	= Math.ceil((maxwidth/height)*width);
			height	= maxwidth;
		}
		
		var $popup	= openPopup({ title:as_info+'  ('+as_width+' x '+as_height+')' , width:width+10, height:height+30 });
		var ls_id	= $popup.attr('id');
		
		$popup.html('<img src="'+str_replace('/index.php','',gs_path)+'/files/'+as_filename+'" alt="" title="" style="width:'+width+'px;height:'+height+'px" />');
	};

    $(document).ready(function() {
        $('#dtl_listfile').datagrid({
            url:gs_path+'/'+controller+'/dtl_sample_file_data', 
            queryParams: { pk_master: $('#pk_master').getval() },
            //height:338,
            pagination:true,
            singleSelect:true,
            columns:[[
                { field : 'filename', hidden : true },
                { field : 'ext', hidden : true },
                { field : 'label', title : 'File Name', width : 380, sortable:true, formatter:f_file_formatter },
                { field : 'mime_type', title : 'Mime Type', width : 180, sortable:true },
                { field : 'filesize', title : 'Size', width : 125, align:'right', sortable:true }
            ]]<?php if($mode!='view'){ 
			// -->> Toolbar [Start]
			// Only Appear On Mode Edit ?>,
            toolbar:[
            {
                text:'Add File',
                iconCls:'icon-add',
                handler:function(){
                    // Create Popup
                    var $popup	= openPopup({ title:'Select File' , width:400, height:320 });
                    var ls_id	= $popup.attr('id');
                    
                    $popup.html($('<form>').attr('id', 'fm_upload_file').html('<div style="text-align:center; padding:20px;"><input id="my_file1" /><br /><input id="my_file2" /><br /><input id="my_file3" /><br /><input id="my_file4" /><br /><a href="#" class="easyui-linkbutton" iconCls="icon-save" id="btn_save_attachment" rel="">Upload</a><br /><br /><div style="font-size:10px;text-align:left;"><b>Allowed extension</b> :<br /><?php echo $file_allowed; ?></div></div>'));
                    $('#fm_upload_file').setupForm([{ name:'my_file1', type:'file' },{ name:'my_file2', type:'file' },{ name:'my_file3', type:'file' },{ name:'my_file4', type:'file' }]);
                    $('#fm_upload_file').data('mode','upload');
                    
                    $('#btn_save_attachment').click(function(){
                        var ls_id = $('#pk_master').val();
                        $('#fm_upload_file').submitForm('/'+controller+'/submit_upload_file/?pk_master='+urlencode(ls_id), { onComplete : function(){ closePopup(); $('#dtl_listfile').datagrid('reload', {pk_master: ls_id }); }} );
                        return false;
                    })
                    .linkbutton({ plain:false });
                }
            },'-',{
                text:'Remove File',
                iconCls:'icon-remove',
                handler:function(){
                    var row = $('#dtl_listfile').datagrid('getSelected');
                    if (row){
                        if(!confirm('Delete File ?\n(Hapus berkas ? )')) return false;
                        
                        var ls_id	= $('#pk_master').val();
                        var ls_file	= row.filename;
                        setLoading(true);
                        $.ajax({	type: 'GET', url: gs_path+'/'+controller+'/ajax_delete_file/?pk_master='+urlencode(ls_id)+'&filename='+urlencode(ls_file), cache: false, 
                                    success: function(data) { if (data != '') alert(data); setLoading(false); $('#dtl_listfile').datagrid('reload', {pk_master: ls_id }); }, 
                                    error: function(xhr, ajaxOptions, thrownError) { setLoading(false); var ls_message = '';  if (xhr.status == 0) { ls_message = 'You are offline!!\n Please Check Your Network.' } else if (xhr.status == 404) { ls_message = 'Requested URL not found.' } else if (xhr.status == 500) { ls_message = 'Internal Server Error.' } else if (thrownError == 'parsererror') { ls_message = 'Error.\nParsing JSON Request failed.' } else if (thrownError == 'timeout') { ls_message = 'Request Time out.' } else { ls_message = 'Unknow Error.\n' + xhr.responseText } alert(ls_message) }, dataType: "html" 
                                });
                        
                    }
                }
            }]<?php 
			} // -->> Toolbar [End]
			?>
        });
    });
    //--><!]]></script>
<?php } ?>